<template>
  <el-card class="box-card" style="height: 100%">
    <div class="selector_header">
      <el-form :inline="true" size="small" style="margin-top: .4rem;">
        <el-form-item>
          <el-input class="companySearchInput" v-model="companySearch" placeholder="请输入企业名称"/>
        </el-form-item>
        <el-form-item>
          <el-button class="companySearchBtn" type="primary" @click="search" icon="el-icon-search"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="selector_container">
      <div
        class="selector_element"
        :class="{ act: company.act }"
        v-for="(company, index) in companyList"
        v-bind:key="company.id"
        @click="selectCompany(index)"
      >
        <div class="selector_item_icon"></div>
        <div class="selector_item_text" :title="company.name">{{ company.name.length > 14? company.name.substring(0, 14) + '...': company.name }}</div>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "CompanySelector",
  components: {},
  props: {
    initDatas: Array,
    mutiSelect: Boolean,
  },
  data() {
    return {
      companySearch: "",
      companyList: [],
    };
  },
  created() {
  },
  mounted() {
    this.companyList = this.initDatas;
  },
  methods: {
    selectCompany(index) {
      let self = this;
      this.companyList.forEach((item) => {
        self.$set(item, "act", 0);
      });
      let el = this.companyList[index];
      this.$set(el, "act", 1);
      this.$emit("companySelect", el);
    },
    search() {
      this.$emit('companySearch', this.companySearch)
    },
    loadData(formatter) {
      let data = [];
      if (formatter) {
        this.companyList = formatter.dataLoaded(data);
        return;
      }
      this.companyList = data;
    },
    checkCompanyList(newList) {
        this.companyList.splice(0, this.companyList.length);
        this.companyList=newList;
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/variable";

.selector_header {
  height: 4rem;
}

.selector_container {
  height: 50rem;
  overflow: auto;
}

.selector_container > div {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border-radius: 1rem;
  cursor: pointer;
  margin-top: 2px;
}

.selector_container > div:hover {
  background: #409effd1;
}

.selector_container > .act {
  background: #409effd1;
  color: white;
}

.selector_element {
  text-align: center;
  display: flex;
  align-items: center;
}

.selector_container > .selector_element > .selector_item_icon {
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: 2rem;
  /*background-image: url(../../../public/icon/cad.png);*/
  background-image: $fileFolderIcon;
}

.selector_container > .selector_element > .selector_item_text {
  margin-left: 2rem;
}
</style>
